<!DOCTYPE html>
<html lang="zh">
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style>
        #gallery .file-caption-main {
            display: none;
        }

        #gallery .file-preview {
            border: 0;
        }

        #gallery .active-item {
            background-color: aliceblue;
        }


        #gallery .file-caption-main {
            display: none;
        }

        #gallery .file-drop-zone-title {
            color: #fff;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <input type="hidden" id="url" value=""/>
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#gallery" aria-expanded="true"> 图库选择</a>
            </li>
            <li class="">
                <a data-toggle="tab" href="#uploadImage" aria-expanded="false"> 上传图片</a>
            </li>
            <li class="">
                <a data-toggle="tab" href="#netImage" aria-expanded="false"> 网络地址获取</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="gallery" class="tab-pane active">
                <div class="panel-body">
                    <strong>你可以从以下位置选择需要的图片，选中图片再点确定即可</strong>
                    <div class="hr-line-dashed"></div>
                    <div class="tabs-container">
                        <div class="tabs-left">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a data-toggle="tab" href="#tab-8"> 七牛云图库</a>
                                </li>
                                <li class="">
                                    <a data-toggle="tab" href="#tab-9"> 本地图库</a>
                                </li>
                            </ul>
                            <div class="tab-content ">
                                <div id="tab-8" class="tab-pane active">
                                    <div class="panel-body">
                                        <strong id="qiNiuYunSize"></strong>
                                        <a onclick="qiNiuYunRefresh()" title="刷新">
                                            <i class="fa fa-refresh"></i>
                                        </a>
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group" style="height:600px;overflow-x:hidden;overflow-y:auto">
                                            <div class="file-loading">
                                                <input id="qiNiuYunContainer" type="file">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab-9" class="tab-pane">
                                    <div class="panel-body">
                                        <strong id="localSize"></strong>
                                        <a onclick="localRefresh()" title="刷新">
                                            <i class="fa fa-refresh"></i>
                                        </a>
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group" style="height:600px;overflow-x:hidden;overflow-y:auto">
                                            <div class="file-loading">
                                                <input id="localContainer" type="file">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="uploadImage" class="tab-pane">
                <div class="panel-body">
                    <strong>选择需要上传的服务器</strong>
                    <div class="hr-line-dashed"></div>
                    <div class="radio-box">
                        <input id="qiniu" type="radio" name="serverType" checked value="2">
                        <label th:for="qiniu">七牛云服务器</label>
                    </div>
                    <div class="radio-box">
                        <input id="local" type="radio" name="serverType" value="1">
                        <label th:for="local">本地服务器</label>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <strong> 你可以在此处选择需要上传的图片，上传图片直接作为你的选择</strong>
                    <div class="form-group">
                        <div class="hr-line-dashed"></div>
                        <div class="file-loading">
                            <input class="file" id="imageFileUploader" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
            <div id="netImage" class="tab-pane">
                <div class="panel-body">
                    <strong>你可以在此处输入网络图片地址</strong>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="url" placeholder="请输入网络图片地址" id="netUrl" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        fixLocalConatiner();
        fixQiNiuYunContainer();
    });

    $(document).on("click", ".file-preview-frame", (function () {
        if ($(this).hasClass("active-item")) {
            $(this).removeClass("active-item");
            $("#url").val("");
            return;
        }
        $(".active-item").each(function (i, n) {
            $(this).removeClass("active-item")
        });
        $(this).addClass("active-item");
        $("#url").val($(this).find("img").attr("src"));
    }));

    $("#imageFileUploader").fileinput({
        uploadUrl: "/file/image/add", //上传的地址(访问接口地址)
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showClose: false,
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        validateInitialCount: true,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        uploadExtraData: function (previewId, index) {   //额外参数的关键点
            var obj = {};
            obj.serverType = serverType();  //参数
            return obj;
        }
    });

    //异步上传返回结果处理
    $("#imageFileUploader").on("fileuploaded", function (event, data, previewId, index) {
        //设置父级的URL
        var result = data.response;
        console.log(result)
        if (result.code == web_status.FAIL) {
            $(event.target)
                .fileinput('clear')
                .fileinput('unlock');
            $(event.target)
                .parent()
                .siblings('.fileinput-remove')
                .hide();
            $.modal.alertError(result.msg);
        } else if (result.code == web_status.SUCCESS) {
            $.modal.msgSuccess(result.msg);
            $("#url").val(result.path);
        }
    });

    serverType = function () {
        return $("input[name='serverType']:checked").val();
    };


    function fixQiNiuYunContainer() {
        var initialPreviewQiNiuYun = new Array();
        var initialPreviewConfigQiNiuYun = new Array();
        //发送请求获取数据
        $.operate.ajaxSend("/file/image/list/2", "get", "json", "", function (result) {
            if (result.code == web_status.SUCCESS) {
                //封装数据
                var list = result.list
                //设置页面大小
                $("#qiNiuYunSize").text("七牛云存有" + list.length + "张图片");
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        initialPreviewQiNiuYun[i] = list[i].path;
                        var obj = new Object();
                        obj.caption = list[i].name;
                        obj.size = list[i].size;
                        obj.url = '/file/image?name=' + list[i].name + '&serverType=1';
                        initialPreviewConfigQiNiuYun[i] = obj
                    }
                }
            }
            $.modal.closeLoading();
        });
        $("#qiNiuYunContainer").fileinput({
            'theme': 'explorer-fas',
            initialPreviewAsData: true,
            showRemove: false,
            showClose: false,
            initialPreview: initialPreviewQiNiuYun,
            initialPreviewConfig: initialPreviewConfigQiNiuYun
        });
    }


    function fixLocalConatiner() {
        var initialPreviewLocal = new Array();
        var initialPreviewConfigLocal = new Array();

        $.operate.ajaxSend("/file/image/list/1", "get", "json", "", function (result) {
            if (result.code == web_status.SUCCESS) {
                //封装数据
                var list = result.list
                //设置页面大小
                $("#localSize").text("本地服务器共有" + list.length + "张图片");
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        initialPreviewLocal[i] = list[i].path;
                        var obj = new Object();
                        obj.caption = list[i].name;
                        obj.size = list[i].size;
                        obj.url = '/file/image?name=' + list[i].name + '&serverType=2';
                        initialPreviewConfigLocal[i] = obj
                    }
                }
            }
            $.modal.closeLoading();
        });

        $("#localContainer").fileinput({
            'theme': 'explorer-fas',
            initialPreviewAsData: true,
            showRemove: false,
            showClose: false,
            initialPreview: initialPreviewLocal,
            initialPreviewConfig: initialPreviewConfigLocal
        });
    }

    function localRefresh() {
        $("#localContainer").fileinput('destroy');
        fixLocalConatiner();
    }

    function qiNiuYunRefresh() {
        $("#qiNiuYunContainer").fileinput('destroy');
        fixQiNiuYunContainer();
    }
</script>
</body>
</html>
